<template>
  <div>
    <span v-for="(crumb, index) in breadcrumbs" :key="index">
      <span>{{ crumb.name }}</span>
      <span v-if="index < breadcrumbs.length - 1" style="color: #c0c4cc;"> > </span>
    </span>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();

// 动态生成面包屑数据
const breadcrumbs = computed(() => {
  return route.matched.map((match) => ({
    path: match.path,
    name: match.name
  }));
});
</script>

<style scoped>
span {
  color: var(--el-menu-text-color);
  font-size: 15px;
  line-height: 1;
}
</style>
